<template>
  <div v-if="!emptyData" :id="chartId" style="width: 100%; height: 80vh"/>
  <el-empty v-else description="统计数据不足，请为题目绑定知识点！"/>
</template>

<script>

import * as echarts from 'echarts'

export default {
  name: 'StatKeyPointsTreeMap',
  props: {
    chartKey: {
      type: String,
      default: 'default'
    },
    dataList: Array
  },
  data() {
    return {
      chart: null,
      emptyData: false
    }
  },
  computed: {
    // ID
    chartId() {
      return 'pie-chart-' + this.chartKey
    }
  },
  watch: {
    dataList: {
      handler() {
        this.initChart()
      }
    }
  },

  created() {
    this.initChart()
  },
  methods: {

    // 初始化表格
    initChart() {
      if (!this.dataList || this.dataList.length === 0) {
        return
      }
      let quCount = 0

      for (let i = 0; i < this.dataList.length; i++) {
        quCount += this.dataList[i].value
      }

      if (quCount === 0) {
        this.emptyData = true
        return
      }

      const levelOptions = [
        {
          itemStyle: {
            borderColor: '#777',
            borderWidth: 0,
            gapWidth: 1
          },
          upperLabel: {
            show: false
          }
        },
        {
          itemStyle: {
            borderColor: '#555',
            borderWidth: 5,
            gapWidth: 1
          },
          emphasis: {
            itemStyle: {
              borderColor: '#ddd'
            }
          }
        },
        {
          colorSaturation: [0.35, 0.5],
          itemStyle: {
            borderWidth: 5,
            gapWidth: 1,
            borderColorSaturation: 0.6
          }
        }
      ]

      const option = {
        tooltip: {
          formatter: function(info) {
            const value = info.value
            const treePathInfo = info.treePathInfo
            const treePath = []
            for (let i = 1; i < treePathInfo.length; i++) {
              treePath.push(treePathInfo[i].name)
            }
            return [
              '<div class="tooltip-title">' +
              echarts.format.encodeHTML(treePath.join('/')) +
              '</div>',
              '数量: ' + value + ' 占比：' + info.data.percent + '%'
            ].join('')
          }
        },
        series: [
          {
            name: '知识点分布',
            type: 'treemap',
            visibleMin: 300,
            label: {
              show: true,
              formatter: function(info) {
                return info.data.pointName + '：' + info.data.value + '（' + info.data.percent + '%）'
              }
            },
            upperLabel: {
              show: true,
              height: 30
            },
            itemStyle: {
              borderColor: '#fff'
            },
            levels: levelOptions,
            data: this.dataList,
            zoomToNodeRatio: 0.8
          }
        ]
      }

      this.$nextTick(() => {
        this.chart = echarts.init(document.getElementById(this.chartId))
        this.chart.setOption(option)
      }, 1000)
    }
  }
}
</script>

<style scoped>
.pass {
  color: #1aac1a
}

.fail {
  color: #ff0000;
}

</style>
